@babel/preset-react

What is @babel/preset-react?

The @babel/preset-react npm package is a Babel preset that can be used to transform JSX into standard JavaScript. It is commonly used in React applications to allow developers to write JSX, which is a syntax extension for JavaScript that looks similar to HTML. This preset includes the necessary Babel plugins to parse and transform JSX syntax.

What are @babel/preset-react's main functionalities?

Transform JSX

Converts JSX syntax into createElement calls which are understood by React.

const element = <div>Hello, world!</div>;

Support for React Fragments

Allows the use of React Fragments to group a list of children without adding extra nodes to the DOM.

const element = <><div>Item 1</div><div>Item 2</div></>;

Support for JSX Spread Attributes

Enables the spreading of attributes in JSX elements from an object.

const props = { firstName: 'John', lastName: 'Doe' }; const element = <div {...props} />;

Support for JSX Expression Containers

Allows embedding expressions in JSX by wrapping them in curly braces.

const name = 'world'; const element = <div>Hello, {name}!</div>;

Other packages similar to @babel/preset-react

babel-preset-react-app

This package is similar to @babel/preset-react but is specifically tailored for Create React App projects. It includes additional Babel plugins and configurations suitable for the React scripts bundled with Create React App.

babel-preset-react-hmre

This preset is designed for hot module replacement in React applications during development. It is not a direct alternative to @babel/preset-react but offers additional functionality for a specific development workflow.

README

@babel/preset-react

Babel preset for all React plugins.

See our website @babel/preset-react for more information or the issues associated with this package.

Install

Using npm:

npm install --save-dev @babel/preset-react

or using yarn:

yarn add @babel/preset-react --dev